require(['config'],()=>{
    require(['jquery','artTemplate','cookie'],($,template)=>{
        class CartPage{
            constructor(){
                this.cart=[]
                $.cookie.json=true
                this.loadCookie()
                this.showCart()
                this.clickEdit()
                this.modifiedAmount()
                this.handleCheckAll()
                this.handleCheckParts()
                this.handleRemoveChecked()
                this.cartFooterFixed()   
            }
            //加载cookie
            loadCookie(){
                this.cart=$.cookie('cart')||[]
            }
            //购物车渲染
            showCart(){
                const html=template('cart-template',{carts:this.cart})
                $('.cart-container').html(html)
                //console.log(this.cart);
                if(this.cart.length===0){
                    $('.cart-footer').hide()
                }
                $.cookie('cart',this.cart,{expires:10, path: '/'})
                this.cartFooterInfo()
                this.btnSubmitStatus()
            }
            //点击编辑按钮
            clickEdit(){
                $('main').on('click','thead .cart-ctrl',e=>{
                    if($('thead .cart-ctrl').html()==='编辑'){
                        $('thead .cart-ctrl').html('完成')
                    }else if($('thead .cart-ctrl').html()==='完成'){
                        $('thead .cart-ctrl').html('编辑')
                    }
                    $('.cart-product-remove em').toggle()
                    $('.cart-product-remove i').toggle()
                })
                this.maskHandle()
            }
            //遮罩层处理
            maskHandle(){
                $('main').on('click','.cart-product-remove i', e => {
                    const id = $(e.target).parents('.cart-product').data('id')
                    $('.mask').show().data('id', id)
                })
                $('.mask').on('click', '.dialog-btn-remove', e => {
                    // console.log('删除')
                    // console.log($(e.target).parents('.mask').data('id'))
                    const id=$(e.target).parents('.mask').data('id')
                    this.cart=this.cart.filter(item=>item.id!==id)
                    this.showCart()
                    $.cookie('cart',this.cart,{expires:10, path: '/'})
                    $('.mask').hide().data('id', 0)
                })
                $('.mask .dialog-close, .mask .dialog-return').on('click',e => {
                    $('.mask').hide().data('id', 0)
                })
                
            }
            //数量修改
            modifiedAmount(){
                $('main').on('click','.sub , .add',e=>{
                    const id=$(e.target).parents('.cart-product').data('id')
                    //console.log(id);
                    //console.log(this.cart);
                    this.cart.forEach(item=>{
                        if(item.id===id){
                            if($(e.target).is('.add')){
                                //console.log('添加');
                                if(item.amount<3){
                                    item.amount+=1
                                }else if(item.amount>=3){
                                    $('.cart-number-adder p').show()
                                }
                            }else if($(e.target).is('.sub')){
                                //console.log('减少');
                                if(item.amount>1){
                                    item.amount-=1
                                }
                            }
                        }
                    })
                    this.showCart()
                    
                })
                //手动输入效果
                $('main').on('input','.num input',e=>{
                    const id=$(e.target).parents('.cart-product').data('id')
                    const _amount=$(e.target).val()
                    this.cart.forEach(item=>{
                        if(item.id===id){
                            item.amount=Number(_amount)
                        }
                    })
                    this.showCart()
                })
                
            }
            //处理全选状态
            handleCheckAll(){
                $('main').on('change','.check_all',e=>{
                    const checked = $(e.target).prop('checked')
                    this.cart.forEach(item => item.checked = checked)
                    this.showCart()
                    $.cookie('cart',this.cart,{expires:10, path: '/'})
                })
            }
            //处理部分选中状态
            handleCheckParts(){
                $('main').on('change','tbody .cart-select-all input[type="checkbox"]',e=>{
                    const id = $(e.target).parents('.cart-product').data('id')
                    this.cart.forEach(item => {
                        if (item.id === id) {
                          item.checked = $(e.target).prop('checked')
                        }
                      })
                      this.showCart()
                      $.cookie('cart',this.cart,{expires:10, path: '/'})
                })   
            }
            //删除选中商品
            handleRemoveChecked(){
                $('main').on('click','.cart-remove-selected',e=>{
                    //console.log(this.cart);
                    this.cart=this.cart.filter(item=>item.checked===false)
                    this.showCart()
                    $.cookie('cart',this.cart,{expires:10, path: '/'})
                })
            }
            //购物车底部信息
            cartFooterInfo(){
                //商品总数渲染
                const total=($.cookie('cart')||[]).reduce((res,curr)=>res+curr.amount,0)
                $('.cart-footer-count i').html(total)
                //已选商品数量渲染
                const checkedCart=($.cookie('cart')||[]).filter(item=>item.checked===true)
                const checkedTotal=checkedCart.reduce((res,curr)=>res+curr.amount,0)
                $('.cart-footer-count em').html(checkedTotal)
                //全选状态渲染
                $('.check_all').prop('checked', $('.check_part:checked').length === this.cart.length)
                //购物车商品总计渲染
                const totalCost=this.cart.reduce((res,curr)=>{
                    if(curr.checked){
                        res+=curr.amount*curr.price
                    }
                    return res
                },0)
                $('.total-cost').html(totalCost.toFixed(2))
            }
            btnSubmitStatus(){
                const length=$('.check_part:checked').length
                if(length===0){
                    $('.submitCart').addClass('disabled')
                }else{
                    $('.submitCart').removeClass('disabled')
                }
            }
            //购物车底部结算动态交互效果：粘底效果
            cartFooterFixed(){
                $(document).ready(e=>{
                    const scroll=$(window).scrollTop()
                    const offset=$('.cart-footer').offset()
                    if((offset.top-scroll)>=($(window).height()-$('.cart-footer').height())){
                        $('.cart-footer').addClass('fixed')
                    }
                })
                $(window).on('scroll',e=>{
                    const scroll=$(window).scrollTop()
                    const offset=$('.cart-footer').offset()
                    if((offset.top-scroll)>=($(window).height()-$('.cart-footer').height())){
                        $('.cart-footer').addClass('fixed')
                    }
                    if(offset.top>($('main').height()+$('header').height())){
                        $('.cart-footer').removeClass('fixed')
                    }
                })
                
            }
        }
        new CartPage()
    })
})